import React, { Component } from 'react'

export default class TabE extends Component {
    state = {
        carNumbers: [],
        count: 10
    }
    componentDidMount() {
        this.randomCarNumber()
    }
    componentWillUnmount(){
        clearInterval(this.timmer)
        
    }
    randomCarNumber = () => {
        this.timmer = setInterval(() => {
            let array = []
            for (let index = 0; index < 6; index++) {
                const carNumber = this.begin()
                array.push(carNumber)
            }
            console.log(array);
            this.setState({
                carNumbers: array
            })
        }, 300);
    }
    /**
     * 产生一个车牌
     */
    begin = () => {
        let array = []
        //三个数组
        for (let index = 0; index < 3; index++) {
            const carNumber = Math.floor(Math.random() * 10)
            array.push(carNumber)
        }
        //两个字母
        for (let index = 0; index < 2; index++) {
            const temp = Math.floor(Math.random() * 26 + 65)
            const chart = String.fromCharCode(temp)
            array.push(chart)
        }
        //打乱顺序
        array.sort((a, b) => {
            return Math.random() - 0.5
        })
        return "川A" + array.join("")
    }
    pause = () => {
        if (this.timmer) {
            clearInterval(this.timmer)
            this.timmer = null
        } else {
            this.randomCarNumber()
        }
    }
    chooseNumber = (value) => {
        console.log(value);
    }

    changeCount = () => {
        this.state.count = 100
        this.forceUpdate()
    }
    render() {
        const { carNumbers } = this.state
        return (
            <div>
                <h2>车牌选号</h2>
                <ul>
                    {carNumbers.map(item => {
                        return <li onClick={() => this.chooseNumber(item)} key={item}>{item}</li>
                    })}
                </ul>
                <p>你选中车牌：</p>
                <button onClick={this.pause}>暂停</button>
                <p>{this.state.count}</p>
                <button onClick={this.changeCount}>修改count</button>
            </div>
        )
    }
}
